<template>
  <div class="ftp_div">
    <!--    <el-header style="background-color: #d2c3c3">FTP 文件上传</el-header>-->
    <el-form :model="ftp" :rules="rules" ref="ruleForm" label-width="100px" class="config_form">
      <el-form-item label="服务器 IP" prop="ftpServerIp">
        <el-input v-model="ftp.ftpServerIp"></el-input>
      </el-form-item>
      <el-form-item label="用户信息" required>
        <el-col :span="12">
          <el-form-item prop="ftpUserName">
            <el-input placeholder="请输入账号" v-model="ftp.ftpUserName" prefix-icon="el-icon-s-custom"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="padding-left: 6px">
          <el-form-item prop="ftpPassWord">
            <el-input placeholder="请输入密码" :type="type" v-model="ftp.ftpPassWord"
                      autocomplete="on" prefix-icon="el-icon-lock">
              <i
                  slot="suffix"
                  class="icon-style"
                  :class="elIcon"
                  autocomplete="auto"
                  @click="flag = !flag"
              />
            </el-input>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="服务器文件" prop="ftpServerFileName">
        <el-input type="file" ref="file" multiple="multiple" v-model="ftp.ftpServerFileName"
                  @change="onInputFileChange"></el-input>
      </el-form-item>
      <el-form-item label="设备文件" prop="ftpDeviceFileName">
        <el-input v-model="ftp.ftpDeviceFileName"></el-input>
      </el-form-item>

      <div class="image_preview">
        <el-image
            style="width: 20px; height: 25px;"
            :src="require('@/assets/union_rule_font.jpg')"
            :preview-src-list="[require('@/assets/union/ftp.jpg')]">
        </el-image>

        <el-button @click="resetForm('ruleForm')" style="float: right;margin: 0 10px">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" style="float: right;margin: 0 10px">上载</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'UploadFtpFile',
  data() {
    return {
      flag: false,
      ftp: {
        ftpServerIp: '',
        ftpUserName: '',
        ftpPassWord: '',
        ftpServerFileName: '',
        ftpDeviceFileName: ''
      },
      rules: {
        ftpServerIp: [
          {required: true, message: '请输入服务器ip', trigger: 'blur'}
        ],
        ftpUserName: [
          {required: true, message: '请输入用户名', trigger: 'change'}
        ],
        ftpPassWord: [
          {required: true, message: '请输入密码', trigger: 'change'}
        ],
        ftpServerFileName: [
          {required: true, message: '请输入服务器文件名', trigger: 'change'}
        ],
        ftpDeviceFileName: [
          {required: true, message: '请输入设备文件名', trigger: 'change'}
        ],

      }
    };
  },
  computed: {
    type() {
      return this.flag ? "text" : "password";
    },
    elIcon() {
      return this.flag ? "el-icon-minus" : "el-icon-view";
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$bus.$emit('config:visible',false);
      this.$refs[formName].resetFields();
    },
    onInputFileChange() {
      var photos = []
      for (let obj in this.$refs.file.files) {
        var file = this.$refs.file.files[obj]
        var url = URL.createObjectURL(file)
        var until = {
          imgSrc: url
        }
        photos.push(until)
      }
      console.log(photos)
    }
  }
}
</script>

<style>


</style>